<header>
  <nav
    class="main-nav"
    [style.background-color]="subnavDisplay ? '#ffffff' : 'transparent'"
  >
    <div>
      <div class="logo">
        <a
          href="/index.html"
          class="meizu-header-logo-img"
          data-bh="click_public_yt_logo"
          data-mtype="gw_public_yt_logo"
          ><svg
            [attr.fill]="subnavDisplay ? '#00b4ff' : '#ffffff'"
            version="1.1"
            id="Logo"
            xmlns="http://www.w3.org/2000/svg"
            x="0px"
            y="0px"
            width="402.048px"
            height="73.556px"
            viewBox="17.318 5.824 402.048 73.556"
            enable-background="new 17.318 5.824 402.048 73.556"
          >
            <path
              d="M321.513,5.824H256.91v12.878h51.478l-49.294,44.581c-8.227,7.023-2.872,16.096,3.958,16.096h65.337V66.472 h-52.117l48.964-44.554C333.52,14.473,328.535,5.824,321.513,5.824"
            ></path>
            <rect x="226.517" y="5.824" width="14.426" height="73.556"></rect>
            <path
              d="M104.296,5.824h-71.36c-8.576,0-15.618,7.012-15.618,15.588v57.967H31.14V23.743 c0-2.711,2.208-5.041,4.92-5.041h25.31v60.677h14.428V18.702h25.312c2.712,0,4.919,2.329,4.919,5.041v55.636h13.86V21.416 C119.888,12.841,112.872,5.824,104.296,5.824"
            ></path>
            <path
              d="M148.765,23.614c0-2.712,2.199-4.912,4.911-4.912h55.909V5.824h-58.236c-8.576,0-15.592,7.016-15.592,15.592 v42.37c0,8.576,7.017,15.592,15.592,15.592h58.236V66.5h-55.909c-2.711,0-4.911-2.199-4.911-4.912V49.042h58.43V36.117h-58.43 V23.614z"
            ></path>
            <path
              d="M405.506,5.824v55.637c0,2.71-2.22,5.039-4.931,5.039h-39.77c-2.711,0-4.892-2.328-4.892-5.039V5.824h-13.86 v57.963c0,8.576,7.018,15.592,15.592,15.592h46.127c8.575,0,15.592-7.017,15.592-15.592V5.824H405.506z"
            ></path></svg
        ></a>
      </div>
      <div class="links">
        <a
          href="#"
          class="links-item"
          [class.links-item--show]="subnavDisplay"
          *ngFor="let item of nameTheMenu"
          (mouseenter)="item.hasSubnav ? subnavDisplayToggle(item.name) : null"
          (mouseleave)="item.hasSubnav ? subnavDisplayToggle() : null"
          >{{ item.name }}</a
        >
      </div>
      <app-search></app-search>
      <div class="user">
        <svg
          [attr.fill]="subnavDisplay ? '#666666' : '#ffffff'"
          t="1576807646533"
          class="meizu-header-user-img"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1966"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="200"
          height="200"
        >
          <defs><style type="text/css"></style></defs>
          <path
            d="M512 561.152c-153.088 0-277.504-124.416-277.504-277.504 0-153.088 124.416-277.504 277.504-277.504s277.504 124.416 277.504 277.504c0 153.088-124.416 277.504-277.504 277.504z m0-478.72c-111.104 0-201.216 90.112-201.216 201.216 0 111.104 90.112 201.216 201.216 201.216s201.216-90.112 201.216-201.216c0-111.104-90.112-201.216-201.216-201.216z"
            p-id="1967"
          ></path>
          <path
            d="M969.216 1012.736c-20.992 0-38.4-11.264-38.4-32.256 0-230.912-187.904-418.816-418.816-418.816s-418.816 187.904-418.816 418.816c0 20.992-16.896 32.256-38.4 32.256s-38.4-11.264-38.4-32.256c0-272.896 222.208-495.104 495.104-495.104s495.104 222.208 495.104 495.104c0.512 20.992-16.384 32.256-37.376 32.256z"
            p-id="1968"
          ></path>
          <path
            d="M977.92 1013.248H45.568c-15.872 0-29.184-13.312-29.184-29.184v-7.68c0-15.872 13.312-29.184 29.184-29.184h931.84c15.872 0 29.184 13.312 29.184 29.184v7.68c0.512 15.872-12.8 29.184-28.672 29.184z"
            p-id="1969"
          ></path>
        </svg>
      </div>
      <div class="cart">
        <svg
          [attr.fill]="subnavDisplay ? '#666666' : '#ffffff'"
          t="1576808166927"
          class="meizu-header-cart"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1926"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="200"
          height="200"
        >
          <defs><style type="text/css"></style></defs>
          <path
            d="M228.125789 216.529455h717.917091c41.844364 0 76.055273 35.095273 77.963636 78.010181 0 3.909818-1.908364 9.774545-1.908363 13.637819l-68.421818 390.097454a76.055273 76.055273 0 0 1-74.14691 64.372364H307.997789c-36.119273 0-66.56-25.367273-74.146909-60.462546v-3.909818L144.483607 171.659636c-3.816727-19.502545-18.990545-33.140364-38.027636-33.140363H38.034153A38.632727 38.632727 0 0 1 0.006516 99.514182 38.632727 38.632727 0 0 1 38.034153 60.509091h68.421818c55.156364 0 102.679273 40.96 112.174545 97.512727l9.495273 58.507637z m651.403636 468.107636l68.421819-390.097455H243.346153l64.651636 390.097455h571.531636zM296.873425 962.606545a60.974545 60.974545 0 1 1-0.046545-121.902545 60.974545 60.974545 0 0 1 0.046545 121.902545z m593.035637 0a60.974545 60.974545 0 1 1-0.046546-121.902545 60.974545 60.974545 0 0 1 0.046546 121.902545z"
            p-id="1927"
          ></path>
        </svg>
      </div>
    </div>
  </nav>
  <nav
    class="subnav"
    [class.subnav-show]="subnavDisplay"
    (mouseenter)="subnavDisplayTrue()"
    (mouseleave)="subnavDisplayTrue()"
  >
    <div
      class="subnav-item"
      [style.display]="displayFlex(hoverSubnavName, '手机')"
    >
      <a class="link" href="#">
        <img src="/assets/header/1.jpg" height="120" />
        <span>魅族 16T</span>
        <span>￥1999</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/1.jpg" height="120" />
        <span>魅族 16T</span>
        <span>￥1999</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/1.jpg" height="120" />
        <span>魅族 16T</span>
        <span>￥1999</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/1.jpg" height="120" />
        <span>魅族 16T</span>
        <span>￥1999</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/1.jpg" height="120" />
        <span>魅族 16T</span>
        <span>￥1999</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/1.jpg" height="120" />
        <span>魅族 16T</span>
        <span>￥1999</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/1.jpg" height="120" />
        <span>魅族 16T</span>
        <span>￥1999</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/1.jpg" height="120" />
        <span>魅族 16T</span>
        <span>￥1999</span>
      </a>
    </div>
    <div
      class="subnav-item"
      [style.display]="displayFlex(hoverSubnavName, '声学')"
    >
      <a class="link" href="#">
        <img src="/assets/header/2.jpg" height="120" />
        <span>魅族 HD60 头戴式蓝牙耳机</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/2.jpg" height="120" />
        <span>魅族 HD60 头戴式蓝牙耳机</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/2.jpg" height="120" />
        <span>魅族 HD60 头戴式蓝牙耳机</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/2.jpg" height="120" />
        <span>魅族 HD60 头戴式蓝牙耳机</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/2.jpg" height="120" />
        <span>魅族 HD60 头戴式蓝牙耳机</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/2.jpg" height="120" />
        <span>魅族 HD60 头戴式蓝牙耳机</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/2.jpg" height="120" />
        <span>魅族 HD60 头戴式蓝牙耳机</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/2.jpg" height="120" />
        <span>魅族 HD60 头戴式蓝牙耳机</span>
        <span>￥499</span>
      </a>
    </div>
    <div
      class="subnav-item"
      [style.display]="displayFlex(hoverSubnavName, '配件')"
    >
      <a class="link" href="#">
        <img src="/assets/header/3.jpg" height="120" />
        <span>魅族移动电源3</span>
        <span>￥79</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/3.jpg" height="120" />
        <span>魅族移动电源3</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/3.jpg" height="120" />
        <span>魅族移动电源3</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/3.jpg" height="120" />
        <span>魅族移动电源3</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/3.jpg" height="120" />
        <span>魅族移动电源3</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/3.jpg" height="120" />
        <span>魅族移动电源3</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/3.jpg" height="120" />
        <span>魅族移动电源3</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/3.jpg" height="120" />
        <span>魅族移动电源3</span>
        <span>￥499</span>
      </a>
    </div>
    <div
      class="subnav-item"
      [style.display]="displayFlex(hoverSubnavName, '生活')"
    >
      <a class="link" href="#">
        <img src="/assets/header/4.jpg" height="120" />
        <span>魅族防飞溅声波电动牙刷</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/4.jpg" height="120" />
        <span>魅族防飞溅声波电动牙刷</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/4.jpg" height="120" />
        <span>魅族防飞溅声波电动牙刷</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/4.jpg" height="120" />
        <span>魅族防飞溅声波电动牙刷</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/4.jpg" height="120" />
        <span>魅族防飞溅声波电动牙刷</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/4.jpg" height="120" />
        <span>魅族防飞溅声波电动牙刷</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/4.jpg" height="120" />
        <span>魅族防飞溅声波电动牙刷</span>
        <span>￥499</span>
      </a>
      <a class="link" href="#">
        <img src="/assets/header/4.jpg" height="120" />
        <span>魅族防飞溅声波电动牙刷</span>
        <span>￥499</span>
      </a>
    </div>
    <div
      class="subnav-item"
      [style.display]="displayFlex(hoverSubnavName, 'APP下载')"
    >
      APP下载
    </div>
  </nav>
</header>
